<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.rui1024.pojo.User" %>
<%
	//排除登录失败的情况
	if(request.getAttribute("user")==null){
		String username=null;
		String password=null;
		Cookie[] cookies = request.getCookies();
		for (int i = 0; cookies!=null && i <cookies.length ; i++) {
			if(cookies[i].getName().equals("userCookie")){
				username = cookies[i].getValue().split("-")[0];
				password = cookies[i].getValue().split("-")[1];
			}
		}
		if(username==null){
			username="";
		}
		if(password==null){
			password="";
		}
		pageContext.setAttribute("user",new User(username,password));
	}
%>
<!DOCTYPE html>
<html lang="zh-en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><%--响应式开发--%>
    <title>老八蜜汁小汉堡</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/jQuery.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jQuery.js"></script>
	<script>
		<%--js:操作dom元素--%>
		// function checkForm() {
		//     var username = document.getElementById("username").value;
		//     var password = document.getElementById("password").value;
		//     if(username==null || username==""){
		//       alert("请输入用户名！");
		//       return false;
		//     }
		//     if(password==null || password==""){
		//       alert("请输入密码！");
		//       return false;
		//     }
		//     return true;
		// }

		//  语法：$("selector").()

		function checkForm() {
			let username = $("#username").val();
			let password = $("#password").val();
			if(username==null || username==""){
				alert("请输入用户名！");
				return false;
			}
			if(password==null || password==""){
				alert("请输入密码！");
				return false;
			}
			return true;
		}

		//js:文档加载完毕事件
		// window.onload=function () {
		//     document.getElementById("reset").onclick=function () {
		//       document.getElementById("username").value="";
		//       document.getElementById("password").value="";
		//     }
		// }

		//jquery:文档加载完毕事件
		$(function () {
			$("#reset").click(function () {
				$("#username").val("")
				$("#password").val("");
			})
		})

	</script>
<link rel="stylesheet" href="css/css1.css">

    <style type="text/css">
        body {
            padding-top: 200px;
            padding-bottom: 40px;
            background-image: url('img/body-img-1.jpg');
            background-repeat: no-repeat;

        }

        .form-signin-heading{
            text-align: center;
        }

        .form-signin {
            max-width: 300px;
            padding: 19px 29px 0px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
        }
        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }
        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 12px;
            padding: 7px 9px;
        }
		.password{
			position: relative;
		}
		.password img{
			position: absolute;
			top: 10px;
			right: 10px;
			width: 20px;
			height: 20px;
		}
		.password p{
			font-size: 14px;
			color: skyblue;
			position: absolute;
			right: 0px;
		}
		.PDF{
			position: relative;
			height: 80px;
			width: 80px;
			text-align: center;
			font-size: 12px;
			color: #f40;
			float: right;
			right: 50px;
		}
		.PDF img{
			width: 70px;
			height: 70px;
			margin-top: 5px;
		}
		.close-btn{
			position: absolute;
			top: -1px;
			left: -16px;
			width: 14px;
			height: 14px;
			border: 1px solid #cccccc;
			line-height: 14px;
			font-family: Arial, Helvetica, sans-serif;
			cursor: pointer;
		}
    </style>

</head>

<body>

	<%--<div class="body">--%>
		<%--<div class="body-bj">--%>
			<%--<div class="body-right">--%>
				<%--<div class="body-right-container">--%>
					<%--<span>高档餐馆网上电子系统</span>--%>
					<%--<div class="login-form-box">--%>
						<%--<form name="form1" method="post" action="LoginServlet">--%>
							<%--<div>--%>
								<%--<label for="yh">用户名:</label> <input type="text" name="uname"--%>
									<%--id="yh" placeholder="输入账号">--%>
							<%--</div>--%>
							<%--<div>--%>
								<%--<label for="mm">密码:</label><input type="password" name="upwd"--%>
									<%--id="mm" placeholder="输入密码">--%>
							<%--</div>--%>
							<%--<div>--%>
								<%--<input type="submit" value="提交/登录"--%>
									<%--style="width: 100px; height: 50px">--%>
							<%--</div>--%>
						<%--</form>--%>
					<%--</div>--%>
				<%--</div>--%>
			<%--</div>--%>
		<%--</div>--%>
	<%--</div>--%>

	<div class="PDF" id="PDF">
		扫描二维码
		<img src="img/2wei.png" alt="">
		<i class="close-btn" id="close">x</i>
	</div>
	<div class="container">
		<form name="myForm" class="form-signin" action="login" method="post" onsubmit="return checkForm()">
			<h2 class="form-signin-heading">老八蜜汁小汉堡</h2>
			<input id="username" name="username"  value="${user.userName}"  type="text" class="input-block-level" placeholder="用户名...">
			<div class="password">
			<label for="" >
				<img src="${pageContext.request.contextPath}/img/eyeclose.png" id="label">
			</label>
			<input id="password" name="password"  value="${user.userPasswd}" type="password" class="input-block-level" placeholder="密码..." >
			<a href="register.jsp" ><p>快速注册</p></a>
			</div>
			<label class="checkbox">
				<input id="remember" name="remember" type="checkbox" value="remember-me">记住我 &nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">${errorMsg}</span>
			</label>
			<button class="btn btn-large btn-primary" type="submit" name="userType" value="普通用户" style="margin-left: 40px"> 用户登录</button>
			&nbsp;&nbsp;
			<td style="padding-right: 40px;padding-left: 20px"><input type="submit" name="userType" value="管理员" style="font-size:20px;height: 44px;width: 110px;border-style: inset;" ></td>
			<br/><br/>
			<button class="btn btn-large btn-primary" type="button" id="reset" style="margin-left: 115px">重置</button>
			<p align="center" style="padding-top: 8px;">登录前代表您已同意<span style="color: blueviolet;">隐私政策</span></p>
		</form>
	</div>

	<div class="end">
		<img src="img/end-img.jpg" class="end-img">
	</div>

	<script>
		var img = document.getElementById('label');
		var password = document.getElementById('password');
		var flag = 0;
		img.onclick = function () {
			if (password.type == "password") {
				password.type = 'text';
				img.src = '${pageContext.request.contextPath}/img/eye.png';
			}
			else if (password.type == "text"){
				password.type = 'password';
				img.src = '${pageContext.request.contextPath}/img/eyeclose.png';
			}
		}
	</script>

	<script>
		var PDF = document.getElementById('PDF');
		var close = document.getElementById('close');
		close.onclick = function () {
			PDF.style.display = 'none';
		}
	</script>
</body>
</html>